import './AdminTableTemp.scss'

import dayjs from 'dayjs'
import PropTypes from 'prop-types'
import { useRef, useState } from 'react'
import { Skeleton, Result, App } from 'antd'
import { useEventEmitter, useMount } from 'ahooks'

import { ModelBox } from '../Model'
import { ProTableTemplate } from './ProTable'
import { breadthSearch } from '../Utils/Common'
import { GetIndexedDB } from '../Utils/IndexedDB'

const AdminTableTemp = ({ url, uuid, title }) => {
    AdminTableTemp.propTypes = { url: PropTypes.string, uuid: PropTypes.string, title: PropTypes.string }
    const { notification } = App.useApp()
    const actionRef = useRef()
    const ProTableEvent = useEventEmitter()
    ProTableEvent.useSubscription(val => setOptionsCall(val))
    const [TablePages, setTablePages] = useState()
    const [TableStatus, setTableStatus] = useState(true)
    const [OptionsCall, setOptionsCall] = useState()
    useMount(async () => {
        await import(`../Router/Router01/${url}.jsx`)
            .then(async res => {
                const tables = res.default
                const ClientData = await GetIndexedDB('redis')
                const menu = await GetIndexedDB('menu')
                const Permission = menu ? await breadthSearch(menu, 'targetUrl', url)?.children : []
                const pageData = await tables({ uuid, url, ProTableEvent, ClientData, Permission, actionRef })
                setTablePages(pageData)
                setTableStatus(false)
                console.info(`%c[${dayjs().format('YYYY-MM-DD HH:mm:ss')}]\nROT一级路径 -- ${title}:${url}`, 'color: #f759ab; font-size: 16px;')
            })
            .catch(() => {
                notification.error({ key: 'table', message: `${url} - 页面路径不存在` })
                setTableStatus(false)
            })
    })

    return (
        <div className='AdminTableTemp' >
            <Skeleton loading={TableStatus} active paragraph={{ rows: 16 }}>
                {TablePages ?
                    <ProTableTemplate
                        title={title}
                        actionRef={actionRef}
                        TablePages={TablePages}
                    /> :
                    <Result status="404" title={`${title} 页面走丢了`} subTitle="这都被你发现了! emmm...等我补一个..." />
                }
            </Skeleton>
            <ModelBox OptionsCall={OptionsCall} actionRef={actionRef} />
        </div>
    )
}

export default AdminTableTemp